<template>
  <view class="good_info_container">
    <!-- 商品展示区域 -->
    <view class="goods_container">
      <view
        class="goodsInfo_box"
        v-for="(item, index) in goodsList"
        :key="index"
      >
        <view class="goodsinfo">
          <view class="img_box">
            <image
              class="avatar"
              :src="item.goods.cover_image + '?' + timestamp"
              @tap="go_detail(item)"
              :lazy-load="true"
              @load="imgLoad(index)"
            ></image>
            <image
              :class="['avatar', 'load_img', item.imgShow ? 'hide_load' : '']"
              src="https://img.xingkonglian.net/img/common/load_img.png"
              @tap="go_detail(item)"
              v-if="!item.imgshow"
            ></image>
          </view>
          <view class="right">
            <view class="goods_title">{{ item.goods.goods_title }}</view>
            <view class="sec_row flex-r">
              <view class="commision"
                >佣金率 {{ item.goods.commission_rate * 100 }}%</view
              >
              <view class="status">{{
                statusList[item.goods.goods_status]
              }}</view>
            </view>
            <view class="third_row flex-r">
              <view class="price"
                >价格 {{ item.goods.price2 }}~{{ item.goods.price }}</view
              >
              <view class="count">库存 {{ item.goods.goods_total_amt }}</view>
            </view>
          </view>
        </view>
        <view class="btn_container">
            <van-button
              custom-class="btn"
              @tap="set_mchnear_goods(item)"
              v-if="type=='out'"
              >曝光商品</van-button
            >
            <van-button
              custom-class="btn last"
              color="#3CC457"
              @tap="set_tj_goods(item)"
             v-if="type=='promotion'"
              >推广</van-button
            >
        </view>
      </view>
    </view>
    <!-- 商品展示区域 -->
  </view>
</template>

<script>
import { update_status, query_one } from "../../utils/imapi";
const statusList = {
  0: "仓库中",
  1: "已上架",
  2: "提审中",
  3: "审核成功",
  4: "审核失败",
};
export default {
  name: "GoodInfo",
  props: {
    goodsList: {
      type: Array,
      required: true,
    },
    type: {
      type: String,
    },
    query: {
      type: Boolean,
      default: true,
    },
    timestamp: {
      type: String,
    },
  },
  components: {},
  data() {
    return {
      statusList,
    };
  },
  computed: {},
  watch: {},
  onLoad() {
    console.log(this.goodsList);
    console.log(this.type);
    console.log(this.query);
  },
  onReady() {},
  onShow() {},
  methods: {
    imgLoad(index) {
      console.log(index);
      this.$set(this.goodsList[index], "imgShow", true);
    },
    set_mchnear_goods(item) {
      this.$emit("set_goods", item);
    },
    set_tj_goods(item) {
      this.$emit("set_tg", item);
    },
    go_detail(item) {
      console.log(item);
      uni.navigateTo({
        url:
          "/pages/goods_detail/goods_detail?id=" +
          item.goods.id +
          "&from=query",
      });
    },

  },
  onReachBottom() {},
  onHide() {},
};
</script>

<style scoped lang="scss" scoped>
.query_container {
  .goodsInfo_box {
    border-bottom: 16upx solid #F0EEFD;
    .goodsinfo {
      display: flex;
      align-items: center;
      padding: 20rpx 20rpx 20rpx;
      border-bottom: 1px solid #f0eefd;
      .img_box {
        position: relative;
        margin-right: 14upx;
        width: 160upx;
        height: 160upx;
      }
      .avatar {
        position: absolute;
        left: 0;
        right: 0;
        top: 0;
        width: 160upx;
        height: 160upx;
        display: block;
        transition: all 0.8s;
      }
      .load_img {
        z-index: 12;
        opacity: 1;
      }
      .hide_load {
        opacity: 0;
      }
      .right {
        display: flex;
        flex-direction: column;
        justify-content: space-between;
        flex: 1;
        .goods_title {
          width: 494upx;
          max-height: 80upx;
          text-align: left;
          font-size: 28upx;
          font-family: PingFangSC-Regular, PingFang SC;
          font-weight: 400;
          color: #0a0819;
          text-overflow: ellipsis;
          overflow: hidden;
        }
        .sec_row {
          margin-bottom: 10rpx;
          margin-top: 10rpx;
        }
        .flex-r {
          font-size: 26rpx;
          font-family: PingFangSC-Regular, PingFang SC;
          font-weight: 400;
          color: #0a0819;
        }
      }
    }
    .btn_container {
      display: flex;
      justify-content: flex-end;
      padding-right: 34rpx;
      margin-top: 22rpx;
      margin-bottom: 56rpx;
    }
    /deep/ .btn {
      padding: 0 !important;
      width: 112upx;
      height: 52upx;
      padding: 0 15rpx !important;
      background: #FE6F9A;
      color: #fff;
      border-radius: 26rpx;
      font-size: 26upx;
      font-family: PingFangSC-Regular, PingFang SC;
      font-weight: 400;
      line-height: 52upx;
      text-align: center;
      border: 1px solid #f0eefd;
      box-sizing: content-box;
    }
    /deep/ .last {
      margin-right: 0 !important;
      padding: 0 !important;
    }
    /deep/ .public {
      background: #fe6f9a !important;
      color: #ffffff !important;
      border: none !important;
    }
  }
}
</style>
